<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>响应式练习</title>
    <link href="css/normalize.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">

</head>
<body>
<!--[if lt IE 8]>
<p class="browserupdate">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->
<header><h1>Responseive Timeline</h1></header>
<div class="container">
    <div class="item">
        <div class="timeline">
            <div class="data">2016-05-01</div>
            <div class="time">18:30</div>
        </div>
        <div class="news">
            <div class="content">
                <div class="point"></div>
                <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, molestiae.</h2>
                <hr>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dicta dolorem doloremque et ex exercitationem hic. Alias animi assumenda blanditiis, dolores doloribus, excepturi fuga fugiat fugit laboriosam laudantium libero maiores mollitia nulla numquam odit officia perferendis porro possimus praesentium quaerat quas quibusdam quo repellendus reprehenderit repudiandae sequi suscipit tenetur vero voluptate voluptatum? Amet autem ipsum laboriosam laborum, molestias natus nobis officia perferendis quaerat, quibusdam, sint totam unde vero. A consequuntur distinctio excepturi, laborum necessitatibus nesciunt, non odit quod ratione, rem repudiandae sint vero voluptas! Doloribus ea error et facere iure labore mollitia nam neque omnis, porro quibusdam reprehenderit rerum saepe!</p>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="timeline">
            <div class="data">2016-04-01</div>
            <div class="time">12:30</div>
        </div>
        <div class="news">
            <div class="content">
                <div class="point"></div>
                <h2>Lorem ipsum dolor sit amet.</h2>
                <hr>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur dignissimos error et molestiae nisi! Deleniti, itaque, maxime. Aliquid culpa magnam molestiae mollitia nisi placeat porro soluta, voluptatibus. Aliquam aperiam cum dicta error in minus nam natus nostrum odit repellat repellendus reprehenderit, saepe sed soluta voluptas! Aperiam consectetur hic quasi quidem!</p>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="timeline">
            <div class="data">2016-03-21</div>
            <div class="time">11:30</div>
        </div>
        <div class="news">
            <div class="content">
                <div class="point"></div>
                <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
                <hr>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis et eum inventore neque quos sit. A accusamus aliquam amet at blanditiis, dolorum eaque exercitationem expedita id iure libero nesciunt nisi omnis pariatur perspiciatis porro quaerat quam qui quia quod reiciendis, rem sed suscipit tempora tenetur veniam voluptatibus. Ducimus facere harum hic laudantium molestias neque, repellat ullam unde veniam voluptatum? A aspernatur consequatur dolore enim, eum ex neque nobis suscipit vel!</p>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="timeline">
            <div class="data">2016-02-15</div>
            <div class="time">12:50</div>
        </div>
        <div class="news">
            <div class="content">
                <div class="point"></div>
                <h2>Lorem ipsum dolor sit amet, consectetur adipisicing.</h2>
                <hr>
                <p>Lorem ipsum1 dolor sit amet, consectetur adipisicing elit. Commodi enim eos facilis fugit magnam modi nisi rem voluptatem? Alias aperiam blanditiis deleniti et exercitationem illum inventore molestiae officiis quibusdam quisquam sed, voluptas voluptates. At beatae consectetur doloribus error, esse facere fugit illum iusto officia quia sint unde voluptate voluptatibus. Architecto corporis cumque deserunt dicta ea earum, in laboriosam non quos?</p>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="timeline">
            <div class="data">2016-02-22</div>
            <div class="time">09:10</div>
        </div>
        <div class="news">
            <div class="content">
                <div class="point"></div>
                <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore.</h2>
                <hr>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, odio quo. Doloremque, dolores impedit laudantium perspiciatis possimus quas quibusdam! Ad aliquam at blanditiis cum deleniti distinctio fuga harum illo ipsum maiores numquam optio pariatur quo, ratione rerum sed tenetur veniam.</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>